export default {
  data() {
    return {
      searchWidthBase: "",
      searchWidth: "",
      topAreaHeight: "",
      scrollTopOld: 0,
      searchBoxTop: 0,
      searchBoxTopBase: '',
      screenWidth: 375,
      pageTitleHeight: 0,
      searchHeight: 0,
    }
  },
  mounted() {
    this.getRect();
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "",
    });
  },
  methods: {
    getRect() {
      wx.getSystemInfo({
        success: (res) => {
          // console.log(res)
          this.screenWidth = res.screenWidth;
        },
      });
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".top")
        .boundingClientRect((data) => {
          this.topAreaHeight = data.height;
        })
        .exec();
      query
        .select(".search-wrap")
        .boundingClientRect((data) => {
          this.searchWidthBase = data.width;
          this.searchWidth = data.width;
          this.searchHeight = data.height;
        })
        .exec();

      query.select(".page-title").boundingClientRect((data) => {
        this.pageTitleHeight = data.height;
      })
      .exec();
    },
    handleScroll(res) {
      let isUp = res.scrollTop - this.scrollTopOld > 0;
      let scrollTop = 0;
      scrollTop = res.scrollTop * 1;
      // if (isUp) {
      //   scrollTop = res.scrollTop * 0.5;
      // } else {
      //   scrollTop = res.scrollTop * 1;
      // }

      let upTopHeight = this.pageTitleHeight ; // 向上移动的距离
      let minWidth = (this.screenWidth * 255)/375; // 最小宽度

      let widthRange = this.searchWidthBase - minWidth;
      let widthChange = (scrollTop * widthRange) / upTopHeight;

      // 宽度变化
      if (isUp) {
        this.searchWidth = this.searchWidthBase - widthChange;
      } else {
        if (res.scrollTop < (upTopHeight-1)) {
          this.searchWidth = this.searchWidthBase - widthChange;
        }
      }
      if(this.searchWidth > this.searchWidthBase) {
        this.searchWidth = this.searchWidthBase;
      }

      if (this.searchWidth < minWidth) {
        this.searchWidth = minWidth;
      }

      // 高度变化
      if (isUp) {
        this.searchBoxTop = 0 - scrollTop;
      } else {
        if (res.scrollTop < (upTopHeight-1)) {
          this.searchBoxTop = 0 - scrollTop;
        }
      }

      if (this.searchBoxTop < -upTopHeight) {
        this.searchBoxTop = -upTopHeight;
      }

      if(this.searchBoxTop > 0) {
        this.searchBoxTop = 0;
      }

      this.scrollTopOld = res.scrollTop;
    },
  }
}